<template>
  <div class="container">
    <div class="contorl">
      <el-row>
        <span
          style="
            margin-right: 20px;
            font-size: 14px;
            color: #fff;
            font-weight: bold;
          "
          >控制台</span
        >
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-circle-plus"
          disabled
          >新增</el-button
        >
        <el-button type="success" size="mini" icon="el-icon-edit" disabled
          >修改</el-button
        >
        <el-button type="info" size="mini" icon="el-icon-refresh-left" @click="reload"
          >刷新</el-button
        >
        <el-button type="danger" size="mini" icon="el-icon-delete" disabled
          >删除</el-button
        >
      </el-row>
    </div>
    <el-table
      ref="filterTable"
      :data="list"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="index" width="65" label="订单号" fixed>
      </el-table-column>
      <el-table-column prop="work_user_id" label="员工ID" width="110">
      </el-table-column>
      <el-table-column prop="user_id" label="用户ID" width="65">
      </el-table-column>
      <el-table-column prop="created_at" label="订单创建时间" width="190">
      </el-table-column>
      <el-table-column prop="start_time" label="工作开始时间" width="190">
      </el-table-column>
      <el-table-column prop="end_time" label="工作结束时间" width="190">
      </el-table-column>
      <el-table-column label="用户地址">
        <el-table-column
          prop="province"
          label="省份"
          width="80"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="80"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="area"
          label="区县"
          width="80"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          width="110"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="用户备注"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="user_type" label="用户详情" width="80">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            icon="el-icon-s-custom"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="user_type" label="员工详情" width="80">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit2(scope.$index, scope.row)"
            type="primary"
            icon="el-icon-user-solid"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="订单状态" width="100">
      </el-table-column>
      <!-- <el-table-column label="是否禁用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="2"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch(scope.row)"
          />
        </template>
      </el-table-column> -->
    </el-table>
    <div class="page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="用户信息" :visible.sync="dialogVisible" width="30%">
      <div class="msgbox">
        <div>
          <span>照片</span> : <img :src="showMsg.icon" alt="" width="250px" />
        </div>
        <div><span>邮箱</span> : {{ showMsg.email }}</div>
        <div><span>昵称</span> : {{ showMsg.nick_name }}</div>
        <div><span>手机号</span> : {{ showMsg.phone }}</div>
        <div><span>性别</span> : {{ showMsg.sex }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="员工信息" :visible.sync="dialogVisible2" width="30%">
      <div class="msgbox" v-show="isShow">
        <div>
          <span>照片</span> : <img :src="showMsg.icon" alt="" width="250px" />
        </div>
        <div><span>邮箱</span> : {{ showMsg.email }}</div>
        <div><span>昵称</span> : {{ showMsg.nick_name }}</div>
        <div><span>手机号</span> : {{ showMsg.phone }}</div>
        <div><span>性别</span> : {{ showMsg.sex }}</div>
        <div><span>时薪</span> : {{ showMsg.h_price }}元/时</div>
      </div>
      <h3 v-show="!isShow">暂无员工接单</h3>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      loginToken: "",
      token: "",
      value: true,
      dialogVisible: false,
      dialogVisible2: false,
      showMsg: {
        email: "",
        icon: "",
        nick_name: "",
        phone: "",
        sex: "",
        h_price: "",
      },
      isShow: true,
    };
  },
  methods: {
    reload(){
      this.handleCurrentChange(this.currentPage);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.showMsg.email = row.user_info[0].email;
      this.showMsg.icon = row.user_info[0].icon;
      this.showMsg.nick_name = row.user_info[0].nick_name;
      this.showMsg.phone = row.user_info[0].phone;
      this.showMsg.sex = row.user_info[0].sex;
      console.log(index, row);
    },
    handleEdit2(index, row) {
      this.dialogVisible2 = true;
      if (row.work_user_info.length == 0) {
        this.isShow = false;
      } else {
        this.isShow = true;
        this.showMsg.email = row.work_user_info[0].email;
        this.showMsg.icon = row.work_user_info[0].icon;
        this.showMsg.nick_name = row.work_user_info[0].nick_name;
        this.showMsg.phone = row.work_user_info[0].phone;
        this.showMsg.sex = row.work_user_info[0].sex;
        this.showMsg.h_price = row.work_user_info[0].h_price;
      }
      console.log(index, row);
    },

    //分页器
    handleCurrentChange(val) {
      this.currentPage = val;
      this.myaxios
        .post("http://housekeepi.com/api/admin/workList", {
          token: this.loginToken,
          page: val,
          size: 7,
        })
        .then((success) => {
          this.total = success.data.data.count;
          this.list = success.data.data.data;
          this.list.forEach((element) => {
            element.created_at = new Date(
              element.created_at * 1000
            ).toLocaleString();
            element.start_time = new Date(
              element.start_time * 1000
            ).toLocaleString();
            element.end_time = new Date(
              element.end_time * 1000
            ).toLocaleString();
            if (element.user_info[0].sex == 1) {
              element.user_info[0].sex = "男";
            } else if (element.user_info[0].sex == 2) {
              element.user_info[0].sex = "女";
            } else {
              element.user_info[0].sex = "保密";
            }
            if (element.work_user_info.length != 0) {
              if (element.work_user_info[0].sex == 1) {
                element.work_user_info[0].sex = "男";
              } else if (element.work_user_info[0].sex == 2) {
                element.work_user_info[0].sex = "女";
              } else {
                element.work_user_info[0].sex = "保密";
              }
            }
            if (element.work_user_id == 0) {
              element.work_user_id = "暂无员工接单";
            }
            if (element.state == 4) {
              element.state = "已接单";
            } else if (element.state == 1) {
              element.state = "未接单";
            } else if (element.state == 2) {
              element.state = "用户已取消";
            } else if (element.state == 8) {
              element.state = "订单已完成";
            } else if (element.state == 9) {
              element.state = "用户已评论";
            }
          });
        });
      console.log(`当前页: ${val}`);
    },
    //禁用状态
    // changeSwitch(row) {
    //   this.myaxios.post(
    //     "http://api_dev.wanxikeji.cn/api/admin/userAccountBan",
    //     {
    //       token: this.loginToken,
    //       id: row.user_id,
    //     }
    //   );
    // },
  },
  mounted() {
    this.loginToken = localStorage.getItem("loginmsg");
    this.myaxios
      .post("http://housekeepi.com/api/admin/workList", {
        token: this.loginToken,
        page: 1,
        size: 7,
      })
      .then((success) => {
        this.total = success.data.data.count;
        this.list = success.data.data.data;
        this.list.forEach((element) => {
          element.created_at = new Date(
            element.created_at * 1000
          ).toLocaleString();
          element.start_time = new Date(
            element.start_time * 1000
          ).toLocaleString();
          element.end_time = new Date(element.end_time * 1000).toLocaleString();
          if (element.user_info[0].sex == 1) {
            element.user_info[0].sex = "男";
          } else if (element.user_info[0].sex == 2) {
            element.user_info[0].sex = "女";
          } else {
            element.user_info[0].sex = "保密";
          }
          if (element.work_user_info.length != 0) {
            if (element.work_user_info[0].sex == 1) {
              element.work_user_info[0].sex = "男";
            } else if (element.work_user_info[0].sex == 2) {
              element.work_user_info[0].sex = "女";
            } else {
              element.work_user_info[0].sex = "保密";
            }
          }
          if (element.work_user_id == 0) {
            element.work_user_id = "暂无员工接单";
          }
          if (element.state == 4) {
            element.state = "已接单";
          } else if (element.state == 1) {
            element.state = "未接单";
          } else if (element.state == 2) {
            element.state = "用户已取消";
          } else if (element.state == 8) {
            element.state = "订单已完成";
          } else if (element.state == 9) {
            element.state = "用户已评论";
          }
        });
      });
  },
};
</script>

<style scoped>
.contorl {
  background: rgba(72, 126, 176, 0.4);
  padding: 10px 0 10px 15px;
}
.page {
  margin: 5px 10px 0 0;
  float: right;
}
.msgbox {
  width: 70%;
  margin: 0 auto;
}
.msgbox img {
  vertical-align: top;
}
.msgbox div {
  margin: 15px 0;
  font-size: 14px;
}
.msgbox div span {
  font-weight: bold;
}
</style>